<template>
	<div class="pie-wrap">
		<div style="height: 50px;" :style="{'margin-bottom':config.styles.background!='system'?'15px':''}"  v-if="config.showTitle">
			<title-common :config="chartConfig"></title-common>
		</div>
		<div style="flex: 1">
			<component
                v-if="chartComponent"
				:ref="chartComponent"
				style="width: 100%;height:100%"
				:chartConfig="chartConfig"
				:screenConfig="screenConfig"
				:is="chartComponent"
				:drillDownValue="drillDownVal"
				:parentViews="parentViews"
				@setChartComponent="setChartComponent"
				@setParentViews="setParentViews"
				@setDrillDownValue="setDrillDownValue"
                :loadView="loadView"
			>
			</component>
		</div>
	</div>
</template>

<script>
/**
 * 图表组件渲染
 */
import ComponentView from "@/views/modules/preview/components/common/component-view.js";
import charComponents from "@/views/modules/preview/components/char-component/index";

export default {
	name: "chart-view",
	mixins:[ComponentView,charComponents],
	data() {
		return {
			chartComponent:"",
			chartConfig:this.config,
			//下钻上级
			parentViews:[],
			drillDownVal:this.drillDownValue
		}
	},
	mounted() {
		this.setChartComponent();
	},
	methods: {
		setChartComponent(config){
			if(!config){
				config=this.chartConfig;
			}else {
				this.chartConfig=config;
			}
			if(config.chartType){
				this.chartComponent = config.chartType+"-view";
			}
		},
		mouseup(){
		    if(this.$refs[this.chartComponent] && this.$refs[this.chartComponent].mouseup){
                this.$refs[this.chartComponent].mouseup()
            }
		},
		setParentViews(parentViews){
			let self=this;
			setTimeout(function () {
                self.parentViews=parentViews;
			},1000)
		},
		setDrillDownValue(drillDownValue){
            this.drillDownVal=drillDownValue;
		}
	}
}
</script>

<style scoped>
.pie-wrap {
	width: 100%;
	display: flex;
	height: 100%;
	flex-direction: column;
	position: inherit!important;
}
</style>
